<!--  -->
<template>
  <el-form :inline="true" label-position="right" label-width="110px" size="small" class="filter-form-inline">
    <el-row v-if="datas" :gutter="40" style="margin-left: 0px; margin-right: 0px">
      <el-col :span="24">
        <item-title title="终端产品信息" />
      </el-col>

      <el-col :span="8">
        <el-form-item label="终端名称：" style="width: 100%;">
          <toolTip :title="datas?.terminalName" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所在地区：" style="width: 100%">
          <span v-if=" datas?.provinceName">{{datas?.provinceName }}/{{ datas?.cityName }}/{{ datas?.areaName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所在街道：" style="width: 100%">
          <span v-if="datas?.streetName"> {{datas?.streetName}}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="终端类型：">
          <span> {{ getLabel('app_mode', datas?.terminalType) }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="产品通用名：">
          <toolTip :title="datas?.productPopularName" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="商品名：">
          <toolTip :title="datas?.productName" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="包装规格：">
          <toolTip :title="datas?.packSpecs" />
          <!-- <my-tooltip :content="datas?.packSpecs" /> -->
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="生产厂家：" style="width:100% ;">
          <toolTip :title="datas?.producer" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="终端价：">
          <el-link :underline="false" type="primary" @click="handlToTerminalPrice">
            <span>{{ datas?.terminalPrice }}
              <span v-if="datas?.sellUnit">
                元/{{ getLabel('sell_unit', datas?.sellUnit) }}
              </span>
            </span>
          </el-link>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="交易价：">
          <template v-if="datas?.sellMode === 'direct'">
            <span>{{ datas?.tradePrice }}</span>
            <span v-if="datas?.sellUnit">
              元/{{ getLabel('sell_unit', datas?.sellUnit) }}
            </span>
          </template>
          <template v-else>
            <el-link :underline="false" type="primary" @click="handlToTradePrice"><span>{{ datas?.tradePrice }}</span>
              <span v-if="datas?.sellUnit">
                元/{{ getLabel('sell_unit', datas?.sellUnit) }}
              </span>
            </el-link>
          </template>

        </el-form-item>
      </el-col>

      <!-- <el-col :span="8">
        <el-form-item label="开发期限截至：">
          <span> {{ dateFormat("yyyy-mm-dd",datas?.expireTime) }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="注册日期：">
          <span> {{ dateFormat("yyyy-mm-dd",datas?.agentRegisterTime) }}</span>
        </el-form-item>
      </el-col> -->
      <el-col :span="8">
        <el-form-item label="负责营销职员：">
          <span>{{ datas?.headName }}</span>
        </el-form-item>
      </el-col>

      <template v-if="datas?.distributeContractDetails && datas?.distributeContractDetails.length > 0">
        <el-col :span="24">
          <item-title title="配送信息" />
        </el-col>
        <el-col :span="24">
          <distributor-table :unit="datas?.sellUnit" :list="datas?.distributeContractDetails" />
        </el-col>
      </template>

      <el-col :span="24" style="margin-top: 20px">
        <item-title title="开发记录" />
      </el-col>
      <el-col :span="24">
        <operation-view :id="productId" mode="dev" />
      </el-col>
    </el-row>
  </el-form>
  <!--终端价-->
  <detail-drawer ref="terminalPriceRef" custom-title>
    <template #title>
      <span>产品终端价</span>-
      <span>{{ datas?.productPriceStrategyDetail?.priceNumber }}</span>
    </template>
    <template #contents>
      <terminalPrice :id="datas?.productPriceId" />
    </template>
  </detail-drawer>

  <!--交易价-->
  <detail-drawer ref="tradePriceRef" custom-title>
    <template #title>
      <span>产品交易价</span>-
      <span>{{ datas?.productPriceStrategyDetail?.priceNumber }}</span>
    </template>
    <template #contents>
      <tradePrice :id="datas?.agentProductId" />
    </template>
  </detail-drawer>

</template>

<script>
import { defineAsyncComponent, inject, onMounted, reactive, toRefs } from "vue";

export default {
  name: "directDetails",
  props: {
    productId: {
      type: Number,
      default: 0,
    },
  },
  components: {
    tradePrice: defineAsyncComponent(() =>
      import(
        "@CRM/views/commonView/detailComponents/agent/productAndPriceInfoView"
      )
    ),
    terminalPrice: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/product/terminalPrice")
    ),
    planInfo: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/business/planInfo")
    ),
  },
  setup(props, context) {
    const api = inject("api");
    var data = reactive({
      tableData: [],
      datas: {},
      tradePriceRef: null,
      terminalPriceRef: null,
    });

    // 获取详情
    const handlDetail = () => {
      api.terminal.PRODUCT_DETAILS(props.productId).then((res) => {
        if (res.code === 0) {
          for (const key in res.data) {
            data.datas[key] = JSON.parse(JSON.stringify(res.data))[key];
          }
        }
      });
    };

    const handlToTerminalPrice = () => {
      data.terminalPriceRef.open();
    };

    const handlToTradePrice = () => {
      data.tradePriceRef.open();
    };

    onMounted(() => {
      handlDetail();
    });

    return {
      ...toRefs(data),
      handlDetail,
      handlToTradePrice,
      handlToTerminalPrice,
    };
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>